<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/bootstrap-icons.css">
  <title>成绩单-响应式</title>
  <style>
    th { min-width: 120px; }
  </style>
</head>
<body class="container">

<div class="table-responsive text-nowrap">
  <table class="table table-striped table-bordered">
    <caption>期中考试成绩单</caption>
    <thead>
      <tr>
        <th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th>
      </tr>
    </thead>
    <tbody>
      <tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr>
      <tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr>
      <tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr>
      <tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr>
      <tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr>
      <tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr>
    </tbody>
  </table>
</div>

</body>
</html>